import type { FC } from 'react';
import { memo, useMemo, useState } from 'react';
import styles from './index.module.less';

const NavMenuItem: FC<NavMenuItem.Props> = (props) => {
  const { text, active, id, onClick, icon, color } = props;
  const [isMouseDown, setMouseDown] = useState(false);
  const iconName = useMemo(() => {
    if (icon) {
      return `icon-${icon.replace(/^icon-/, '')}`;
    } else {
      return 'icon-list';
    }
  }, []);
  return (
    <div
      className={`${styles.container} ${active ? styles.active : undefined} ${
        isMouseDown ? styles.mouseDown : undefined
      }`}
      onClick={() => {
        if (onClick) {
          onClick(id, color ?? '#005fb8', text);
        }
      }}
      onMouseDown={() => {
        setMouseDown(true);
      }}
      onMouseUp={() => {
        setMouseDown(false);
      }}
    >
      <div className={styles.content}>
        <div className={styles.iconContainer}>
          <span className={`iconfont ${iconName}`} style={{ color: color ?? '#005fb8' }} />
        </div>
        <div className={styles.text}>{text}</div>
      </div>
    </div>
  );
};

export default memo(NavMenuItem);
